Gatsby 블로그 검색엔진 최적화(SEO)하기

Amaranth2023년 04월 18일

플러그인 설치

내가 만든 gatsby 블로그를 검색엔진에서 검색될 수 있도록 작업하였다.

우선 다음 패키지들을 설치해준다.

gatsby-plugin-sitemap
gatsby-plugin-robots-txt
gatsby-plugin-canonical-urls

gatsby-plugin-sitemap : sitemap 작성을 도와주는 플러그인

💡 sitemap이란? 사이트의 설계도 및 지도 역할을 하는 파일로, 구글에 사이트가 검색되게 하기 위해서는 sitemap.xml 파일을 작성해서 내 사이트에 대해 알리고 구글 엔진이 크롤링하여 색인 등록이 되어야 한다.

설치 후 gatsby-config.js 파일에 플러그인을 추가한다.
```
module.exports = {
  ...
  plugins:[
    ...
    'gatsby-plugin-sitemap',
  ]
}
```

gatsby-plugin-robots-txt : build 폴더에 자동으로 robots.txt를 만들어주는 플러그인이다.

설치 후 gatsby-config.js 파일에 옵션과 함께 플러그인을 추가한다.

module.exports = {
  ...
  plugins: [
    ...
    {
      resolve: 'gatsby-plugin-robots-txt',
      options: {
        host: 'your blog url',
        sitemap: 'your blog url/sitemap.xml',
        policy: [{userAgent: '*', allow: '/}]
      }
    }
  ]
}

gatsby-plugin-canonical-urls : siteUrl을 설정해주기 위해 필요하다. ⭐여기까지 작업했다면 블로그 url/sitemap-0.xml로 접속했을 때 sitemap이 생성될 것이다.

구글 검색 등록(Google Search Console)

Google Search Console

위 링크에 접속해서 URL 접두어 항목을 선택하고 블로그의 URL을 입력한다.

그럼 아래와 같은 화면이 뜰텐데, 여기서 다른 확인 방법>HTML 태그를 선택하면 나오는 meta tag를 복사해둔다.

<meta name="google-site-verification" content="*고유 코드*" />

의 형식일 것이다.

이 메타 태그를 Seo 컴포넌트의 메타 태그들이 있는 곳에 붙여넣어준다.

src/components/seo.js

...
return (
    <>
      <title>{defaultTitle ? `${title} | ${defaultTitle}` : title}</title>
      <meta name="description" content={metaDescription} />
      <meta property="og:title" content={title} />
      ...
      <meta
        name="google-site-verification"
        content="고유 코드"
      />
...